<template>
    <div class="body">
        <img class="body_img" src="https://bu.dusays.com/2024/10/06/6702b2c54c694.jpg" alt="">
        <img src="https://bu.dusays.com/2024/10/07/6702b4e883017.png" alt="" class="body_logo">
        <img class="body_farmBird" src="https://bu.dusays.com/2024/10/07/670320fd11123.png" alt="">
        <img src="https://bu.dusays.com/2024/10/07/670320fcd7a25.png" alt="" class="body_farmBird_money">
        <img src="https://bu.dusays.com/2024/10/07/6702b78258447.png" alt="" class="body_adminBird">
        <div class="register_box">
            <div class="register_card">
                <div class="card_title">
                    <h2>注册吱吱农场</h2>
                </div>
                <div class="card_login">
                    <span>已经有账户了?<a href="/login">登录</a></span>
                </div>
                <div v-if="islogin" class="account_way">
                    <div class="login_way">
                        <div class="account_login">
                            <h2 style="color: black;">账号注册</h2>
                        </div>
                        <div class="email_login">
                            <h2 @click="islogin = !islogin" style="color: gray;">邮箱注册</h2>
                        </div>
                    </div>
                    <div class="input_box">
                        <el-form :model="data.form" ref="formRef" :rules="data.rules">
                            <el-form-item prop="username">
                                <div class="account_input">
                                    <v-text-field class="account_input_v" v-model="data.form.username" label="用户名"
                                        variant="outlined" placeholder="请输入您的用户名"
                                        :rules="[() => !!data.form.username || '用户名为空，请输入用户名']" required></v-text-field>
                                </div>
                            </el-form-item>
                            <el-form-item prop="password">
                                <div class="password_input">
                                    <v-text-field type="password" class="password_input_v" v-model="data.form.password"
                                        label="密码" variant="outlined" placeholder="请输入您的密码"
                                        :rules="[() => !!data.form.password || '密码为空，请输入密码']" required></v-text-field>
                                </div>
                            </el-form-item>
                            <el-form-item prop="confirmPassword">
                                <div class="rePassword_input">
                                    <v-text-field type="password" class="rePassword_input_v"
                                        v-model="data.form.confirmPassword" label="确认密码" variant="outlined"
                                        placeholder="请再次输入您的密码"
                                        :rules="[() => !!data.form.confirmPassword || '请确认您的密码!']"
                                        required></v-text-field>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="register_btn">
                        <v-btn class="register_btn_v" @click="register">
                            立即注册
                        </v-btn>
                    </div>
                </div>
                <div v-else class="email_way">
                    <div class="account_way">
                        <div class="login_way">
                            <div class="account_login">
                                <h2 @click="islogin = !islogin" style="color: gray;">账号注册</h2>
                            </div>
                            <div class="email_login">
                                <h2 style="color: black;">邮箱注册</h2>
                            </div>
                        </div>
                        <div class="input_box">
                            <el-form :model="data_mail.form" ref="formRef_email" :rules="data_mail.rules">
                                <el-form-item prop="mailAddress">
                                    <div class="account_input">
                                        <v-text-field  class="account_input_v"
                                            v-model="data_mail.form.mailAddress" label="邮箱地址" variant="outlined"
                                            :rules="[() => !!data_mail.form.mailAddress || '邮箱为空，请输入邮箱地址']"
                                            placeholder="请输入您的邮箱地址" required></v-text-field>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <div class="password_input" style="margin-top: -2vh;">
                                        <v-otp-input :length="5" max-width="40vh" min-height="8vh"
                                            v-model="data_mail.form.code"></v-otp-input>
                                    </div>
                                </el-form-item>
                                <a v-if="!isDisabled" @click="code_way()" style="margin-left: 46vh;">发送验证码</a>
                                <a v-else style="margin-left: 42vh;color: gray;">{{ countdown }}s后重新发送验证码</a>
                            </el-form>
                        </div>
                        <div class="register_btn">
                            <v-btn v-if="data_mail.form.code!=null" class="register_btn_v" @click="email_register">
                                立即注册
                            </v-btn>
                            <v-btn v-else style="background-color: gray;" class="register_btn_v">
                                立即注册
                            </v-btn>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import router from "@/router";

const islogin = ref(true)

const validatePass = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请确认密码'))
    } else if (value !== data.form.password) {
        callback(new Error('两次输入密码不一致'))
    } else {
        callback()
    }
}

const data = reactive({
    form: { role: 'USER' },
    rules: {
        username: [
            { required: true, message: '', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '', trigger: 'blur' },
        ],
        confirmPassword: [
            { validator: validatePass, message: '', trigger: 'blur' },
        ],
    }
})

const data_mail = reactive({
    form: { role: 'USER' },
    rules: {
        mailAddress: [
            { required: true, message: '', trigger: 'blur' },
        ],
        code: [
            { required: true, message: '', trigger: 'blur' },
        ],
    }
})



const formRef = ref()

const formRef_email=ref()

// 点击注册按钮的时候会触发这个方法
const register = () => {
    formRef.value.validate((valid => {
        if (valid) {
            // 调用后台的接口
            request.post('/api/register', data.form).then(res => {
                if (res.code === '200') {
                    ElMessage.success("注册成功")
                    router.push('/login')
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })).catch(error => {
        console.error(error)
    })
}

const email_register=()=>{
    formRef_email.value.validate((valid=>{
        if(valid){
            request.post('/api/email_register',data_mail.form).then(res=>{
                if(res.code==='200'){
                    ElMessage.success("注册成功")
                    router.push('/login')
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        }
    })).catch(error=>{
        console.error(error);
    })
}

//验证码倒计时
const isDisabled =ref(false)
const countdown =ref(60)

const timer=()=>{
    isDisabled.value=true
    setInterval(()=>{
        if(countdown.value>0){
            countdown.value--
        }
        else{
            clearInterval(timer)
            isDisabled.value=false
            countdown.value=60
        }
    },1000)
}

//邮箱登录
const code_way=()=>{
    timer();
    send_code();
}

const send_code=()=>(
    request.post('/api/send',data_mail.form).then(res=>{
        console.log(data_mail.form.mailAddress);
        if(res.code=='200'){
            console.log("请求成功");
        }
    })
)


</script>

<style scoped>
.body {
    display: flex;
}

.body_img {
    background-repeat: no-repeat;
    /* 背景图不重复 */
    background-size: cover;
    /* 背景图覆盖整个页面 */
    background-position: center;
    /* 背景图居中显示 */
    margin: 0;
    /* 移除页面的默认边距 */
    width: 100%;
    height: 100vh;
    /* 设置页面高度为视口高度 */
}

.body_logo {
    position: absolute;
    width: 25vh;
    margin-top: 3vh;
    margin-left: 3vh;
}

.body_farmBird {
    position: absolute;
    width: 65vh;
    margin-top: 40vh;
    z-index: 3;
}

.body_farmBird_money {
    position: absolute;
    margin-top: 40vh;
    margin-left: 38vh;
    width: 20vh;
    z-index: 3;
    animation: money 4s ease-in-out infinite;
}

@keyframes money {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, -10px);
    }
}

.body_adminBird {
    position: absolute;
    width: 65vh;
    margin-top: 5vh;
    margin-left: 137vh;
    z-index: 3;
}

.register_box {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.register_box .register_card {
    background-color: rgba(255, 255, 255, 0.8);
    /* 半透明背景 */
    background-color: white;
    width: 100vh;
    height: 65vh;
    border-radius: 5vh;
    backdrop-filter: blur(10px);
    opacity: 0.8;
}

.card_title {
    font-size: 2.5vh;
    color: #634B0C;
    margin-top: 5vh;
    margin-left: 5vh;
}

.card_login {
    font-weight: normal;
    margin-left: 5vh;
    font-size: 2vh;
    color: grey;
    letter-spacing: 0.65vh;
}

.login_way {
    display: flex;
    margin-top: 2vh;
    margin-left: 5vh;
    gap: 2vh;
}

.register_btn {
    display: flex;
    height: 6vh;
    width: 40vh;
    margin: auto;
    margin-top: 2vh;
}

.register_btn_v {
    height: 100%;
    width: 100%;
    font-size: 2vh;
    background-color: #634B0C;
    color: white;
    font-weight: bolder;
    border-radius: 30px;
}

.account_input {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 2vh;
    height: 100%;
    /* 或者设置为父元素的高度 */
    width: 100%;
    /* 或者设置为父元素的宽度 */
}

.account_input_v {
    height: 8vh;
    width: 30vh;
    max-height: 80vh;
    /* 设置最大高度为父元素的80% */
    max-width: 80%;
    /* 设置最大宽度为父元素的80% */
}

.password_input {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 2vh;
    height: 100%;
    /* 或者设置为父元素的高度 */
    width: 100%;
    /* 或者设置为父元素的宽度 */
}

.password_input_v {
    height: 8vh;
    width: 30vh;
    max-height: 80vh;
    /* 设置最大高度为父元素的80% */
    max-width: 80%;
    /* 设置最大宽度为父元素的80% */
}

.rePassword_input {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 2vh;
    height: 100%;
    /* 或者设置为父元素的高度 */
    width: 100%;
    /* 或者设置为父元素的宽度 */
}

.rePassword_input_v {
    height: 8vh;
    width: 30vh;
    max-height: 80vh;
    /* 设置最大高度为父元素的80% */
    max-width: 80%;
    /* 设置最大宽度为父元素的80% */
}
</style>